<template>
   <div id="address" class="app">
            <div class="divHead">
                <div class="divTitle">
                    <i class="el-icon-arrow-left" @click="goBack"></i>地址管理
                </div>
            </div>
            <div class="divContent">
                <div class="divItem" v-for="(item,index) in addressList" :key="index" @click.capture="itemClick(item)">
                    <div class="divAddress">
                        <span :class="{spanCompany:item.label === '公司',spanHome:item.label === '家',spanSchool:item.label === '学校'}">{{item.label}}</span>
                        {{item.detail}}
                    </div>
                    <div class="divUserPhone">
                        <span>{{item.consignee}}</span>
                        <span>{{item.sex === '0' ? '女士' : '先生'}}</span>
                        <span>{{item.phone}}</span>
                    </div>
                    <img src="../assets/images/edit.png" @click.stop.prevent="toAddressEditPage(item)"/>
                    <div class="divSplit"></div>
                    <div class="divDefault" >
                        <img src="../assets/images/checked_true.png" v-if="item.isDefault === 1">
                        <img src="../assets/images/checked_false.png" @click.stop.prevent="setDefaultAddress(item)" v-else>设为默认地址
                    </div>
                </div>
            </div>
            <div class="divBottom" @click="toAddressCreatePage">+ 添加收货地址</div>
        </div>
</template>

<script>
import {base} from '../assets/js/base'
import router from '@/router'
import{addressListApi,setDefaultAddressApi} from '../assets/api/address'
import { logoutApi} from '../assets/api/login'
export default {

    name:"address",
    data(){
        return {
            addressList:[],
            oldUrl:''

        }
    },
    computed:{},
    created(){
        this.initData()
        base(document,window)
    },
    beforeRouteEnter (to, from, next){
        next(vm => {
        // 通过 `vm` 访问组件实例,将值传入oldUrl
        vm.oldUrl = from.path
        })
    },
    methods:{
        goBack(){
            history.go(-1)
        },
        toAddressEditPage(item){
            window.requestAnimationFrame(()=>{
                router.push({path:'/address/edit',query:{id:item.id}})
            })
        },
        toAddressCreatePage(){
            window.requestAnimationFrame(()=>{
                router.push('/address/edit')
            })
        },
        async initData(){
            const res = await addressListApi()
            if(res.data.code === 1){
                this.addressList = res.data.data
            }else{
                this.$message.error(res.data.msg)
            }
        },
        async setDefaultAddress(item){
            if(item.id){
                const res = await setDefaultAddressApi({id:item.id})
                if(res.data.code === 1){
                this.initData()
                }else{
                    this.$message.error(res.data.msg)
                }
            }
        },
        itemClick(item){
            //表示是从订单页面跳转过来的
            if(this.oldUrl==='/addOrder'){
                this.setDefaultAddress(item)
                history.go(-1)
            }
           
        }

    }
    }
</script>

<style>
@import url(../assets/styles/vant.min.css);
@import url(../assets/styles/index.css);
@import url(../assets/styles/address.css);
</style>